import type { RadioChangeEvent } from 'antd';
import { Button, Radio, Select, Space, message } from 'antd';
import { SetStateAction, useRef, useState } from 'react';
import '../../assets/css/SickBed/AddSickbed.css'
import { getAddBedList } from '../../stores/bedMassage'
import { useDispatch } from 'react-redux';
import { handlebedAdd } from '../../api/Sickbed/sickApi'
interface DataType {
    key: React.Key;
    bednumber: string;
    department: string;
    nurse: string;
    oxygen: number;
    heart: number;
    breath: number;
    icu: number;
    aircondition: number;
    tv: number;
}
export default function AddAddsickbed() {
    const dispatch = useDispatch()
    const [bednumberValue, setBednumberValue] = useState('1-101')
    const [oxygenItem, setOxygenItem] = useState<DataType>();
    const [heartItem, setHeartItem] = useState<DataType>();
    const [breathItem, setBreathItem] = useState<DataType>();
    const [icuItem, setIcuItem] = useState<DataType>();
    const [airconditionItem, setAirconditionItem] = useState<DataType>();
    const [tvItem, setTvItem] = useState<DataType>();
    const [departmenttValue, setDepartmentValue] = useState('急救科' || '')
    const [nurseValue, setNurseValue] = useState('刘倩' || '')

    const [messageApi, contextHolder] = message.useMessage();

    const handleDepartment = (value: string) => {
        console.log(`selected ${value}`);
        setDepartmentValue(value)
    };
    const handlenurse = (value: string) => {
        console.log(`selected ${value}`);
        setNurseValue(value)
    };
    const onOxygenChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e);
        setOxygenItem(e.target.value)
    };
    const onHeartChange = (e: RadioChangeEvent) => {
        setHeartItem(e.target.value)
    }
    const onBreathChange = (e: RadioChangeEvent) => {
        setBreathItem(e.target.value)
    }
    const onIcuChange = (e: RadioChangeEvent) => {
        setIcuItem(e.target.value)
    }
    const onAirconditionChange = (e: RadioChangeEvent) => {
        setAirconditionItem(e.target.value)
    }
    const onTvChange = (e: RadioChangeEvent) => {
        setTvItem(e.target.value)
    }
    const departmentData = [
        { value: '急救科', label: '急救科' },
        { value: '骨科', label: '骨科' },
        { value: '神经外科', label: '神经外科' },
        { value: '妇科', label: '妇科' },
        { value: '测试科室', label: '测试科室' },
        { value: '眼科', label: '眼科' },
        { value: '小儿内科', label: '小儿内科' },
        { value: '普通外科', label: '普通外科' },
        { value: '心血管内科', label: '心血管内科' },
    ]

    const nurseData = [
        { value: '刘倩', label: '刘倩' },
        { value: '7', label: '7' },
        { value: '张萍', label: '张萍' },
        { value: '张峰', label: '张峰' },
        { value: '李芳', label: '李芳' },
        { value: '孙七', label: '孙七' },
        { value: '赵六', label: '赵六' }
    ]
    const handleAddList = async () => {
        dispatch(getAddBedList({
            bednumber: bednumberValue,
            department: departmenttValue,
            oxygen: oxygenItem,
            heart: heartItem,
            breath: breathItem,
            icu: icuItem,
            aircondition: airconditionItem,
            tv: tvItem,
            nurse: nurseValue,
        }))
        const AddBedList = await handlebedAdd({
            bednumber: bednumberValue,
            department: departmenttValue,
            oxygen: oxygenItem,
            heart: heartItem,
            breath: breathItem,
            icu: icuItem,
            aircondition: airconditionItem,
            tv: tvItem,
            nurse: nurseValue,
        })
        console.log(AddBedList);
        if (AddBedList.code === 1) {
            messageApi.open({
                type: 'success',
                content: AddBedList.msg,
            });
        } else {
            messageApi.open({
                type: 'error',
                content: AddBedList.msg,
            });
        }
    }

    const handleLast = () => {

    }

    return (
        <div className='Addsickbed'>
            <table className='Addsickbed-Add'>
                <tbody>
                    <tr className='Addsickbed-Add-list'>
                        <td>床位编号</td>
                        <td className='Addsickbed-Add-list-content'><input type='text' value={bednumberValue} onChange={(e) => setBednumberValue(e.target.value)}></input></td>
                    </tr>
                    <tr className='Addsickbed-Add-list'>
                        <td>所属科室</td>
                        <td className='Addsickbed-Add-list-content'>
                            <Space wrap className='space'>
                                <Select
                                    defaultValue="急救科"
                                    style={{ width: 120 }}
                                    onChange={handleDepartment}
                                    options={departmentData}
                                />
                            </Space>
                        </td>
                    </tr>
                    <tr className='Addsickbed-Add-list'>
                        <td>氧气罐</td>
                        <td className='Addsickbed-Add-list-content'>
                            <Radio.Group className='radio' name='oxygen' onChange={onOxygenChange} value={oxygenItem}>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </Radio.Group></td>
                    </tr>
                    <tr className='Addsickbed-Add-list'>
                        <td>心电机</td>
                        <td className='Addsickbed-Add-list-content'>
                            <Radio.Group className='radio' name='heart' onChange={onHeartChange} value={heartItem}>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </Radio.Group></td>
                    </tr>
                    <tr className='Addsickbed-Add-list'>
                        <td>呼吸机</td>
                        <td className='Addsickbed-Add-list-content'>
                            <Radio.Group className='radio' name='breath' onChange={onBreathChange} value={breathItem}>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </Radio.Group></td>
                    </tr>
                    <tr className='Addsickbed-Add-list'>
                        <td>急救设备</td>
                        <td className='Addsickbed-Add-list-content'>
                            <Radio.Group className='radio' name='icu' onChange={onIcuChange} value={icuItem}>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </Radio.Group></td>
                    </tr>
                    <tr className='Addsickbed-Add-list'>
                        <td>空调地暖</td>
                        <td className='Addsickbed-Add-list-content'>
                            <Radio.Group className='radio' name='aircondition' onChange={onAirconditionChange} value={airconditionItem}>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </Radio.Group></td>
                    </tr>
                    <tr className='Addsickbed-Add-list'>
                        <td>电视外设</td>
                        <td className='Addsickbed-Add-list-content'>
                            <Radio.Group className='radio' name='tv' onChange={onTvChange} value={tvItem}>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </Radio.Group></td>
                    </tr>
                    <tr className='Addsickbed-Add-list'>
                        <td>责任护士</td>
                        <td className='Addsickbed-Add-list-content'>
                            <Space wrap className='space'>
                                <Select
                                    defaultValue="刘倩"
                                    style={{ width: 120 }}
                                    onChange={handlenurse}
                                    options={nurseData}
                                />
                            </Space>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            {contextHolder}
                            <Button className='sureAdd' onClick={handleAddList} type="primary">确认创建</Button>
                            <Button className='gotoLast' type='default' onClick={handleLast}>返回上一级</Button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    )
}
